<template>
    <div>
        <!-- 
            头部导航
            click-left: 点击左边图标触发的事件
            click-right：点击右边图标触发的事件
         -->
        <van-nav-bar @click-left="$router.push('/personal')" 
        @click-right="$router.push('/index')"
        title="个人信息编辑" left-arrow>
            <template #right>
                <van-icon name="wap-home-o" color="#000" size="20" />
            </template>
        </van-nav-bar>
        <!-- 内容 -->
        <div class="content">
            <div class="head_img">
                <!-- <img src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg" alt=""> -->
                <img :src="userInfo.head_img | joinPath" alt="">
                <van-uploader :after-read="afterRead" />
            </div>
            <van-cell @click="nicknameDialog" title="昵称" is-link :value="userInfo.nickname" />
            <van-dialog @confirm="updateNicknameFn" :before-close="nicknameClose" v-model="showNickname" title="标题" show-cancel-button>
                <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
                  <van-field
                    required
                    label="用户名"
                    placeholder="请输入用户名"
                    v-model="nickname"
                />
            </van-dialog>
            <van-cell title="密码" is-link value="*******" />
            <!-- 

                三元运算符
                语法：条件? 结果1: 结果2
                    表示：条件成立的情况下执行结果1，否则执行结果2
                
                双引号不能嵌套双引号，相同的引号之间不能嵌套使用
                只能在使用不同的引号进行交叉使用
             -->
            <van-cell title="性别" is-link :value="userInfo.gender==1?'男':'女'" />
        </div>
    </div>
</template>
<script>
import { user,user_update }  from "@/api/user.js"
import { upload } from "@/api/common.js"
export default {
    data(){
        return {
            userInfo: {},
            id: localStorage.getItem("userId-70"),  // 用户id
            showNickname: false,    // 控制昵称弹窗显示隐藏
            nickname: ""
        }
    },
    created(){
        let id = localStorage.getItem("userId-70");
        // 添加loading
        this.$toast.loading({
            message: "加载中...",
            duration: 0
        })
        // 获取用户信息
        user(id).then(res=>{
            console.log(28,res);
            this.userInfo = res.data.data;
            // 清除loading
            this.$toast.clear();
        })
    },
    methods: {
        // 昵称弹窗关闭前会触发的一个函数
        // 调用done()表示关闭弹窗
        // 调用done(false)表示阻止弹窗关闭
        nicknameClose(action,done){
            // console.log(72,action);
            if(!this.nickname&&action==="confirm"){
                // 昵称为空且点击的按钮时“确认”按钮的时候，阻止弹窗关闭
                done(false)
            }else{
                done()
            }
        },
        // 修改昵称
        updateNicknameFn(){
            console.log(70);
            if(!this.nickname){
                this.$toast.fail("昵称不能为空！")
                return
            }
            this.$toast.loading({
                message: "修改中...",
                duration: 0
            })
            user_update(this.id,{
                nickname: this.nickname
            }).then(res=>{
                // console.log(74,res);
                // 修改成功后，更新页面中的昵称
                if(res.data.message == "修改成功"){
                    this.userInfo.nickname = res.data.data.nickname;
                    this.$toast.success(res.data.message)
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        },
        // 显示昵称弹窗
        nicknameDialog(){
            // 显示弹窗
            this.showNickname = true;
            this.nickname = this.userInfo.nickname;
        },
        // 获取上传的图片对象
        afterRead(file){
            // console.log(57,file);
            // 注意：真正上传给后端的对象是file对象里面的file对象
            let fileObj = file.file;
            // 传文件必须使用formData对象
            let formData = new FormData();
            formData.append("file",fileObj);
            this.$toast.loading({
                message: "上传中...",
                duration: 0
            })
            // 上传图片
            upload(formData).then(res=>{
                console.log(65,res);
                let url = res.data.data.url;
                // 调用修改头像的接口
                // let id = localStorage.getItem("userId-70");
                user_update(this.id,{
                    head_img: url
                } ).then(result=>{
                    // 关闭loading效果,并提示用户
                    this.$toast.success(res.data.message);
                    console.log(74,result);
                    if(result.data.message == "修改成功"){
                        // 更新头像
                        this.userInfo.head_img = result.data.data.head_img;
                    }
                })
            })
        }
    }
}
</script>

<style lang="less" scoped>
// /deep/表示样式穿透，用于设置组件内部标签的样式
// （默认情况下不能设置组件内部标签的样式）
/deep/.van-nav-bar{
    border-bottom: 2px solid #e9e9e9;
    .van-icon{
        color: #000;
    }
} 
.van-cell{
    border-bottom: 1px solid #e9e9e9;
}
.content {
    margin-top: 20px;
    .head_img{
        width: 30%;
        height: 100px;
        margin: 0 auto;
        position: relative;
        img{
            width: 100%;
        }
        /deep/.van-uploader{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity:0;
            .van-uploader__upload{
                width: 100%;
                height: 100px;
            }
        }
    }
}

</style>